<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		
		*{
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
		}
		header,nav,main,footer{
			border: 1.5px solid #555555;
			width: 480px;
			text-align: center;
			background: #999999;
			color: ghostwhite;
			margin: 5px auto;
			padding: 10px;
		}
		nav>ul>li{
			border-right: 1.5px solid dimgrey;
			display: inline-block;
			width: 17%;
			font-size: 18px;
		}
		section{
			border-right: solid 1.5px #555555;
			width: 57%;
			float: left;
			text-align: left;
			padding: 5px;
			
		}
		article{
			
			text-align: center;
			width: 37%;
			float: left;
			margin-left:13px;
			padding: 5px 0;
		}
		.clearfix:after {
		display: block;
		clear: both;
		content: ".";
		visibility: hidden;
		height: 0;
		font-size: 0;
}
		p{
			font-size: 100%;
	
}
span{
	font-size: 18px;
}
	</style>
</head>
<body>
	<header>
		<h1>个人主页</h1>
	</header>
	<nav>
		<ul>
			<li style="color: blue;">首页</li>
			<li>作品集</li>
			<li>照片集</li>
			<li style="border: none;">联系方式</li>
		</ul>
	</nav>
	<main class="clearfix">
		<section>
			<h2>个人信息</h2>
			<p><span>姓名：小格</span></p>
			<p><span>英文名：Galaxy Technology</span></p>
			<p><span>年龄：20</span></p>
			<p><span>爱好：IT、运动、编程</span></p>
			<p><span>自我评价：湖北银河信息技术学院成立于1998年，20年专注互联网职业教育发展！全国12个校区，万名在校生，开设云计算，网络安全，JAVA安卓，移动开发，UI等互联网金牌专业</span></p>
			
		</section>
		<article>
			<h2>头像</h2>
			<p><img src="img/top_logopic.jpg"/></p>
		</article>
	</main>
	<footer>
		<span>联系方式：020—12345678</span>
	</footer>
</body>
</html>